import React, { Component } from 'react';
import {
    View,
    Text,
    FlatList,
    Button,
} from 'react-native';

import ExpendListItem from './ExpendListItem'

import request  from '../../utils/request';
import { saveToken, storage, saveObject, saveuserInfo, saveUserInfo } from '../../utils/storage';



var Dimensions = require('Dimensions');

var { width, height } = Dimensions.get('window')
class ExpendList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            dataSourse: [],
            refreshStatus: false,
            startTime: 0,
        }
    }

    requestListData() {

        this.setState({
            refreshStatus: true,
        })

        storage.load({
            key: 'accessUserData'
        }).then(result => {

            request({
                method: 'POST',
                url: 'basebills/basebillsList',
                data: { pageSize: 20, startTime: this.state.startTime, status: this.props.status },
                access_token: result.token,
            })
                .then((data) => {
                    console.log(data.data);
                    var page = this.state.startTime++;
                    this.setState({
                        dataSourse: data.data,
                        startTime: page,
                        refreshStatus: false,
                    })
                })
        })


    }

    pullRefush() {
        this.setState({
            startTime: 0
        })
        { this.requestListData() }

    }
    refreshMore() {
        { this.requestListData() }
    }

    componentDidMount() {

        { this.requestListData() }
    }

    render() {
        return (
            <View style={{ flex: 1 }}>

                <FlatList
                    keyExtractor={this._keyExtractor}
                    data={this.state.dataSourse}
                    renderItem={this._renderItem}
                    onRefresh={() => this.pullRefush()}
                    refreshing={this.state.refreshStatus}
                // onEndReached={() => this.refreshMore()}
                // onEndReachedThreshold={0.1}
                />
            </View>
        );
    }

    _keyExtractor = (item, index) => {

        return (index + item.id + this.props.status + item.createdOn)
    }
        

    _renderItem = (rowData) => {
        return (
            <ExpendListItem
                key={rowData.id}
                rowData={rowData}
                itemClick={(rowData) => this.itemClick(rowData)}
            />
        )

    }

    itemClick = (rowData) => {

        this.props.nav('ExpendDetail',{itemData:rowData,status:this.props.status,title:rowData.item.tempName});
    }
}

export default ExpendList;
